Public
Edited
Oct 12, 2024
Paused
5 stars
{
const selection = vl.selectSingle();
return vl.markCircle()
.data(cars)
.select(selection)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().if(selection, vl.fieldO('Cylinders')).value('grey'),
vl.opacity().if(selection, vl.value(0.8)).value(0.1)
)
.render()
}
function plot(selection) {
return vl.markCircle()
.data(cars)
.select(selection)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().if(selection, vl.fieldO('Cylinders')).value('grey'),
vl.opacity().if(selection, vl.value(0.8)).value(0.1)
)
.width(240)
.height(180);
}
vl.hconcat(
plot(vl.selectSingle()).title('Single (Click)'),
plot(vl.selectMulti()).title('Multi (Shift-Click)'),
plot(vl.selectInterval()).title('Interval (Drag)')
).render()
vl.hconcat(
plot(vl.selectSingle().on('mouseover')).title('Single (Mouseover)'),
plot(vl.selectMulti().on('mouseover')).title('Multi (Shift-Mouseover)')
).render()
genres = uniqueValid(movies, d => d.Major_Genre)
mpaa = ['G', 'PG', 'PG-13', 'R', 'NC-17', 'Not Rated']
{
const selectGenre = vl.selectSingle('Select') // name the selection 'Select'
.fields('Major_Genre') // limit selection to the Major_Genre field
.init({Major_Genre: genres[0]}) // use first genre entry as initial value
.bind(vl.menu(genres)); // bind to a menu of unique genre values
// scatter plot, modify opacity based on genre selection
return vl.markCircle()
.data(movies)
.select(selectGenre)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating'),
vl.tooltip().fieldN('Title'),
vl.opacity().if(selectGenre, vl.value(0.75)).value(0.05)
)
.render();
}
{
// single-value selection over [Major_Genre, MPAA_Rating] pairs
// use specific hard-wired values as the initial selected values
const selection = vl.selectSingle('Select')
.fields('Major_Genre', 'MPAA_Rating')
.init({Major_Genre: 'Drama', MPAA_Rating: 'R'})
.bind({Major_Genre: vl.menu(genres), MPAA_Rating: vl.radio(mpaa)});
// scatter plot, modify opacity based on selection
return vl.markCircle()
.data(movies)
.select(selection)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating'),
vl.tooltip().fieldN('Title'),
vl.opacity().if(selection, vl.value(0.75)).value(0.05)
)
.render();
}
{
const brush = vl.selectInterval()
.encodings('x'); // limit selection to x-axis (year) values
// dynamic query histogram
const years = vl.markBar({width: 4})
.data(movies)
.select(brush)
.encode(
vl.x().year('Release_Date').title('Films by Release Year'),
vl.y().count().title(null)
)
.width(600)
.height(50);
// ratings scatter plot
const ratings = vl.markCircle()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating'),
vl.tooltip().fieldN('Title'),
vl.opacity().if(brush, vl.value(0.75)).value(0.05)
)
.width(600)
.height(400);
return vl.vconcat(years, ratings).spacing(5).render();
}
vl.markCircle()
.data(movies)
.select(
vl.selectInterval().bind('scales') // bind interval selection to scale domains
)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating')
.axis({minExtent: 30}), // add min extent to stabilize axis title placement
vl.tooltip(['Title', 'Release_Date', 'IMDB_Rating', 'Rotten_Tomatoes_Rating'])
)
.width(600)
.height(450)
.render()
vl.markCircle()
.data(movies)
.select(
vl.selectInterval().bind('scales').encodings('x') // bind to x-axis scale only
)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating').axis({minExtent: 30}),
vl.tooltip(['Title', 'Release_Date', 'IMDB_Rating', 'Rotten_Tomatoes_Rating'])
)
.width(600)
.height(450)
.render()
{
const brush = vl.selectInterval().encodings('x');
const x = vl.x().fieldT('date').title(null);
const base = vl.markArea()
.encode(x, vl.y().fieldQ('price'))
.width(700);
return vl.data(sp500)
.vconcat(
base.encode(x.scale({domain: brush})),
base.select(brush).height(60)
)
.render();
}
{
const hover = vl.selectSingle()
.on('mouseover') // select on mouseover
.nearest(true) // select nearest point to mouse cursor
.empty('none'); // empty selection should match nothing
const click = vl.selectMulti()
.empty('none'); // empty selection matches no points
// scatter plot encodings shared by all marks
const plot = vl.markCircle().encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating')
);
// shared base for new layers
const base = plot.transform(
vl.filter(vl.or(hover, click)) // filter to points in either selection
);
// mark properties for new layers
const halo = {size: 100, stroke: 'firebrick', strokeWidth: 1};
const label = {dx: 4, dy: -8, align: 'right'};
const white = {stroke: 'white', strokeWidth: 2};
// layer scatter plot points, halo annotations, and title labels
return vl.data(movies)
.layer(
plot.select(hover, click),
base.markPoint(halo),
base.markText(label, white).encode(vl.text().fieldN('Title')),
base.markText(label).encode(vl.text().fieldN('Title'))
)
.width(600)
.height(450)
.render();
}
{
const brush = vl.selectInterval()
.encodings('x'); // limit selection to x-axis (year) values
// dynamic query histogram
const years = vl.markBar({width: 4})
.data(movies)
.select(brush)
.encode(
vl.x().year('Release_Date').title('Films by Release Year'),
vl.y().count().title(null)
)
.width(600)
.height(50);
//Add code for IMDB rule
//Add code for Rotten Tomatoes rule
// ratings scatter plot
const ratings = vl.markCircle()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating'),
vl.y().fieldQ('IMDB_Rating'),
vl.tooltip().fieldN('Title'),
vl.opacity().if(brush, vl.value(0.75)).value(0.05)
)
.width(600)
.height(400);
// Add code to layer together the ratings, and the rules
return vl.vconcat(years, ratings).spacing(5).render(); //Update to add in layered chart
}
{
const brush = vl.selectInterval()
.resolve('global'); // resolve all selections to a single global instance
return vl.markCircle()
.data(cars)
.select(brush)
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ(vl.repeat('row')),
vl.color().if(brush, vl.fieldO('Cylinders')).value('grey'),
vl.opacity().if(brush, vl.value(0.8)).value(0.1)
)
.width(140)
.height(140)
.repeat({
column: ['Acceleration', 'Horsepower', 'Miles_per_Gallon'],
row: ['Miles_per_Gallon', 'Horsepower', 'Acceleration']
})
.render();
}
{
const brush = vl.selectInterval().encodings('x').resolve('intersect');
const hist = vl.markBar().encode(
vl.x().fieldQ(vl.repeat('row'))
.bin({maxbins: 100, minstep: 1}) // up to 100 bins, but no smaller than 1 unit
.axis({format: 'd', titleAnchor: 'start'}), // integer format, left-aligned title
vl.y().count().title(null) // no y-axis title
);
return vl.layer(
hist.select(brush).encode(vl.color().value('lightgrey')),
hist.transform(vl.filter(brush))
)
.width(900).height(100)
.repeat({row: ['delay', 'distance', 'time']})
.data(flights)
.transform(
vl.calculate('datum.delay < 180 ? datum.delay : 180').as('delay'), // clamp delays > 3 hours
vl.calculate('hours(datum.date) + minutes(datum.date) / 60').as('time') // fractional hours
)
.config({view: {stroke: null}}) // no outline
.render();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.